<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import treeSelect from '@/components/tree-select-edl/index.vue'
import treeSelectAll from '@/components/tree-select-edl/treeSelect.vue'
import lodash from 'lodash'

const emits = defineEmits(['searchEvent'])
// 入参

// 生命周期
const formDataReset = ref()
onMounted(() => {
  formDataReset.value = props.formData
})

/*
 * 打开弹框
 */
//
const dialogVisible = ref(false)
const openDialog = () => {
  // resaveForm()
  dialogVisible.value = true
}

/*
 * 重置表单
 */
const resaveForm = () => {
  Object.keys(props.formData).forEach((item) => {
    if (Object.keys(props.queryDataObj).length) {
      props.formData[item] = lodash.cloneDeep(props.queryDataObj[item])
    } else {
      props.formData[item] = undefined
    }
  })
}

/*
 * 查询表格
 */
const searchTable = () => {
  emits('searchEvent', props.formData)
  dialogVisible.value = false
}

// 弹窗关闭
const handleClose = () => {
  resaveForm()
  dialogVisible.value = false
}

const props = defineProps({
  formData: {
    type: Object,
    default: () => ({}),
  },
  formLabel: {
    type: Object,
    default: () => ({}),
  },
  queryDataObj: {
    type: Object,
    default: () => ({}),
  },
  optionsObj: {
    type: Object,
    default: () => ({}),
  },
})

defineExpose({ openDialog })
</script>
<template>
  <!-- 更多条件按钮弹窗 -->
  <el-dialog
    v-model="dialogVisible"
    title="更多条件"
    width="50%"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <el-form ref="form" :inline="true" label-width="100px" :model="props.formData">
      <template v-for="(item, index) in props.formLabel" :key="index">
        <el-form-item :label="item.label" :required="item.required" v-if="item.label">
          <!-- 输入框 -->
          <el-input
            :disabled="item.disabled"
            v-model="props.formData[item.prop]"
            :placeholder="item.placeholder"
            v-if="item.type == 'input'"
            @keyup.enter="searchTable"
          />
          <!-- 选择框 -->
          <el-select
            :multiple="item.multiple"
            :disabled="item.disabled"
            v-model="props.formData[item.prop]"
            :placeholder="item.placeholder"
            clearable
            v-if="item.type == 'select'"
          >
            <el-option
              v-for="iten in item.options?.length ? item.options : props.optionsObj?.[item.prop]"
              :key="iten.dm"
              :label="iten.mc"
              :value="iten.dm"
            ></el-option>
          </el-select>
          <!-- 日期选择 -->
          <el-date-picker
            :disabled="item.disabled"
            v-model="props.formData[item.prop]"
            :placeholder="item.placeholder"
            :type="item.type"
            v-if="item.type == 'daterange'"
            range-separator="至"
            :start-placeholder="item.placeholderStart"
            :end-placeholder="item.placeholderEnd"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
          ></el-date-picker>

          <!-- 树形选择框 单选-->
          <tree-select
            style="width: 100%"
            :multiple="item.multiple"
            v-else-if="item.type == 'treeSelect'"
            :clearable="item.clearable"
            v-model="props.formData[item.prop]"
            :treeProps="item.props"
            :node-key="item.nodeKey"
            :isLeafNode="item.isLeafNode"
            :options="item.options?.length ? item.options : props.optionsObj?.[item.prop]"
          ></tree-select>

          <!-- 可全选树形选择框 -->
          <tree-select-all
            style="width: 100%"
            :multiple="item.multiple"
            v-else-if="item.type == 'treeSelectAll'"
            v-model="props.formData[item.prop]"
            :clearable="item.clearable"
            :searchPlaceholder="item.placeholder"
            :treeProps="item.props"
            :isLeafNode="item.isLeafNode"
            :check-strictly="item.checkStrictly"
            :node-key="item.nodeKey"
            :options="item.options?.length ? item.options : props.optionsObj?.[item.prop]"
            :show-all-selection="item.showAll"
            :show-current-button="item.showCurrentButton"
          ></tree-select-all>
        </el-form-item>
      </template>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="searchTable"> 查询</el-button>
        <el-button type="primary" @click="resaveForm">重置</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.el-form {
  .el-form-item {
    width: 50%;
    margin-right: 0;
    margin-bottom: 10px;
  }
}
</style>
